<template>
    <div>
      <el-card class="box-card">
        <mytitle :showLine="false">{{$route.meta.title}}</mytitle>
        <div style="display: flex;justify-content: right;margin: 20px;"> 
          <el-button  @click="searchTo" type="warning" >编辑合同模版</el-button>
          <el-button  @click="downCont" type="success" >下载合同模版</el-button>
        </div>
        <el-table ref="singleTable" :header-cell-style="{color: '#292B2B', background: '#EAF9F4'}" :data="tableData" highlight-current-row @current-change="handleCurrentChange" border
          style="width: 100%">
          <el-table-column type="index" label="序号" width="50" align="center">
          </el-table-column>
          <el-table-column prop="contractId" label="合同编号" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="partyB" label="签署人"  align="center">
          </el-table-column>
          <el-table-column prop="signTime" label="签署时间"  align="center">
          </el-table-column>
          <el-table-column prop="contractMoney" label="合同金额"  align="center">
          </el-table-column>
          <el-table-column prop="landNum" label="地块数量"  align="center">
          </el-table-column>
          <el-table-column prop="tenancyDuration" label="租赁时间"  align="center">
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button @click="deleteRow(scope.row)" type="text" >查看</el-button>
              <!-- <el-button @click="deleteRow(scope.row)" type="text" >下载</el-button> -->
            </template>
          </el-table-column>
        </el-table>
         <div class="pagination-box">
          <el-pagination
            background
            @current-change="handlpage"
            :current-page.sync="info.pageNum"
            :page-size="info.pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
         </div>
      </el-card>
    </div>
  </template>
  <script>
import {findSignContractDetail,download} from '../util/api.js'
  export default {
    data() {
      return {
        info:{
          pageNum:1,
          pageSize:6
        },
        total:0,
        tableData: [],
        currentRow: null
      }
    },
    mounted(){
          this.findSignContractDetail()
    },
    methods: {
     async findSignContractDetail(){
               let res =await findSignContractDetail(this.info)
               if(res.code!=200)return
              // console.log(res)
               this.tableData = res.data.rows
               this.total = res.data.total
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      handlpage(val) {
          this.info.pageNum = val
          this.findSignContractDetail()
      },
      deleteRow(row) {
        this.$router.push({
          path: '/contractManagement/examine',
          query:{
            tenancyId:row.tenancyId
          }
        })
      },
     async downCont(){
        let res = await download()     
      //  console.log(res) 
        if(res){
          let linkUrl =  URL.createObjectURL(res)
          let link = document.createElement('a')
          link.download = "模板.doc";
          link.style.display = 'none';
          link.href = linkUrl;
          link.click()
          window.URL.revokeObjectURL(link.href)
            }
      },
      searchTo(){
        this.$router.push({
          path: '/contractManagement/examine'
        })
      } 
    }
  }
  </script>
  <style lang="less" scoped>
    .box-card {
      width: 100%;
      margin: 14px 0;
      .pagination-box{
        width: 100%;
        padding: 20px;
        .el-pagination{
          text-align: right;
        }
      }
    }
  </style>